<template>
	<!-- title部分 -->
	<view class="titlebox">
		<image class="titlebox-backimg" src="../../static/上一步.png" @click="gotoHome"></image>
		<view class="titlebox-titletext">我的订单</view>
	</view>
	<!-- tabbar部分 -->
<!-- 	<view class="tabbar">
		<view class="tabbarbox">
			<view class="tab">全部</view>
			<view class="tab">待付款</view>
			<view class="tab">待发货</view>
			<view class="tab">待收货</view>
			<view class="tab">退款/售后</view>
		</view>
	</view> -->
	
	<!-- tabbar部分 -->
	<view class="tabbarbxo">
		<view class="tabbar">
			<view class="tabbartext" v-for="(tab, index) in tabs" :key="index"
				:class="{ 'active': subCurrent === index }" @click="subChecked(index)">
				{{ tab }}
			</view>
		</view>
	</view>
	
	<!-- order部分 -->
	<view class="order">
		<view class="orderbox">
			<view class="orderfirstbox">
				<image class="orderfirstbox-img" src="../../static/logo.png"></image>
				<view class="orderfirstbox-textbox">
					<view class="orderfirstbox-textbox-text1">【新年礼物】 CHANEL 香奈儿嘉柏丽尔香水</view>

					<view class="orderfirstbox-textbox-text2">￥ 189.00</view>
				</view>
			</view>

			<view class="ordersecondbox">
				<view class="ordersecondbox-situation">待付款</view>

				<view class="ordersecondbox-cancel">取消订单</view>

				<view class="ordersecondbox-pay">去付款</view>
			</view>
		</view>

		<view class="orderbox">
			<view class="orderfirstbox">
				<image class="orderfirstbox-img" src="../../static/logo.png"></image>
				<view class="orderfirstbox-textbox">
					<view class="orderfirstbox-textbox-text1">【新年礼物】 CHANEL 香奈儿嘉柏丽尔香水</view>

					<view class="orderfirstbox-textbox-text2">￥ 189.00</view>
				</view>
			</view>

			<view class="ordersecondbox">
				<view class="ordersecondbox-situation">待付款</view>

				<view class="ordersecondbox-cancel">取消订单</view>

				<view class="ordersecondbox-pay">去付款</view>
			</view>
		</view>

		<view class="orderbox">
			<view class="orderfirstbox">
				<image class="orderfirstbox-img" src="../../static/logo.png"></image>
				<view class="orderfirstbox-textbox">
					<view class="orderfirstbox-textbox-text1">【新年礼物】 CHANEL 香奈儿嘉柏丽尔香水</view>

					<view class="orderfirstbox-textbox-text2">￥ 189.00</view>
				</view>
			</view>

			<view class="ordersecondbox">
				<view class="ordersecondbox-situation">待付款</view>

				<view class="ordersecondbox-cancel">取消订单</view>

				<view class="ordersecondbox-pay">去付款</view>
			</view>
		</view>

		<view class="orderbox">
			<view class="orderfirstbox">
				<image class="orderfirstbox-img" src="../../static/logo.png"></image>
				<view class="orderfirstbox-textbox">
					<view class="orderfirstbox-textbox-text1">【新年礼物】 CHANEL 香奈儿嘉柏丽尔香水</view>

					<view class="orderfirstbox-textbox-text2">￥ 189.00</view>
				</view>
			</view>

			<view class="ordersecondbox">
				<view class="ordersecondbox-situation">待付款</view>

				<view class="ordersecondbox-cancel">取消订单</view>

				<view class="ordersecondbox-pay">去付款</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabs: ['全部', '待付款', '待发货', '待收货', '退款/售后'],
				subCurrent: 0, // 默认选中第一个子tab
			}
		},
		methods: {
			gotoHome() {
				// 在tabbar中使用uniapp的switchTab方法跳转
				uni.switchTab({
					url: '/pages/home/home', // 我的路径
				});
			},
			subChecked(index) {
				this.subCurrent = index;
			},
		}
	}
</script>

<style>
	page {
		background: #F6F6F6;
	}

	.titlebox {
		padding: 2%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 10px;
		/* 添加这一行来水平居中 */
	}

	/* title部分样式 */
	.titlebox-backimg {
		width: 15px;
		height: 15px;
	}

	.titlebox-titletext {
		margin-left: auto;
		margin-right: auto;
		font-size: 15px;
		/* color: #333; */
		font-weight: 600;
	}

	/* tabbar部分 */
	.tabbarbxo {
		padding: 4% 3%;
		/* background: rgb(241, 224, 84); */
	}
	
	.tabbar {
		display: flex;
		gap: 7%;
		align-items: center;
	}
	
	.tabbartext {
		font-size: 15px;
		color: rgb(120, 120, 120);
	}
	
	/* tab被选样式 */
	.active {
		position: relative;
		color: black;
		font-weight: bold;
	}
	
	.active::after {
		content: "";
		position: absolute;
		width: 15px;
		height: 3px;
		background-color: black;
		left: 0;
		right: 0;
		margin: 0 auto;
		top: 25px;
		border-radius: 5px;
	}
	/* .tabbar {
		padding: 2%;
		width: 91%;
		margin: 0 auto;
		margin-bottom: 10px;

	}

	.tabbarbox {
		display: flex;
		align-items: center;
		gap: 2%;
	}

	.tab {
		font-size: 15px;
	} */

	/* order部分 */
	.order {
		padding: 2%;
		padding-bottom: 10px;
	}

	.orderbox {
		width: 96%;
		padding: 2%;
		margin: 0 auto;
		background-color: white;
		border-radius: 10px;
		margin-bottom: 10px;
	}

	.orderfirstbox {
		display: flex;
		align-items: center;
		padding: 4% 2%;
		border-bottom: 1px solid #eee;
	}

	.orderfirstbox-img {
		display: block;
		width: 70px;
		height: 70px;
		margin-right: 10px;
	}

	.orderfirstbox-textbox {
		flex: 1;
	}

	.orderfirstbox-textbox-text1 {
		font-size: 15px;
		margin-bottom: 10px;
	}

	.orderfirstbox-textbox-text2 {
		color: rgb(120, 120, 120);
		font-size: 13px;
	}

	.ordersecondbox {
		display: flex;
		align-items: center;
		padding: 4% 2%;
	}

	.ordersecondbox-situation {
		font-size: 15px;
		color: orange;
		flex: 1;
	}

	.ordersecondbox-cancel {
		font-size: 15px;
		padding: 3%;
		border-radius: 5px;
		border: 1px solid #eee;
		box-sizing: border-box;
		margin-right: 10px;
	}

	.ordersecondbox-pay {
		font-size: 15px;
		padding: 3%;
		border-radius: 5px;
		background-color: rgb(245, 230, 110);
	}
</style>
